<template>
  <card-box title="去现场">
    <!-- <div slot="header">
      <div class="tools">
        <a href="javascript:;" class="full"></a>
        <a href="javascript:;" class="re"></a>
      </div>
    </div> -->
    <div class="scene-info">
      <video :src="demo_video" class="video" controls></video>
      <el-carousel class="carousel" height="100%" v-if="false">
        <el-carousel-item v-for="(item, index) in list" :key="index">
          <div class="carousel-item">
            <div class="carousel-item-header">
              <div class="name">{{ item.name }}</div>
              <!-- <a href="javascript:;" class="icon-pos"></a> -->
            </div>
            <div class="carousel-item-main">
              <!-- <el-image class="img" :src="item.img" fit="cover"></el-image> -->
               <video :src="item.video" class="video" controls></video>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </card-box>
</template>
<script>
import CommonMixin from '../mixin/CommonMixin';
import CardBox from './common/CardBox.vue';
import test_gif from '@/assets/images/yyzhkb/test.gif'
import demo_video from '@/assets/images/yyzhkb/demo-video.mp4'
export default {
  mixins: [CommonMixin],
  data() {
    return {
      demo_video,
      list: [
        { name: '空中直播/空中督查/AI巡查实况', img: test_gif, video: demo_video }
      ]
    }
  }
}
</script>
<style lang="scss">
.carousel {
  height: 90%;
}
</style>
<style lang="scss" scoped>
.tools {
  width: tvw(117);
  height: tvw(24);
  background: url(~@/assets/images/yyzhkb/kb-scene-tool-bg.svg) center center no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .full,
  .re {
    display: block;
    width: tvw(20);
    height: tvw(16);
  }

  .full {
    background: url(~@/assets/images/yyzhkb/kb-scene-full-bg.svg) center center no-repeat;
    background-size: 100% 100%;
    margin-right: tvw(16);
  }

  .re {
    background: url(~@/assets/images/yyzhkb/kb-scene-re-bg.svg) center center no-repeat;
    background-size: 100% 100%;
  }
}

.video {
        display: block;
        width: 100%;
        height: 100%;
        background: #000000;
      }
.scene-info {
  // padding: tvw(11);
  box-sizing: border-box;
  height: tvh(248);

  .carousel-item {
    width: 100%;
    height: 100%;
    position: relative;

    .carousel {
      height: 90%;
    }

    .carousel-item-header {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: tvw(24);
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: tvw(2) tvw(15);
      box-sizing: border-box;

      .name {
        width: 50%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: tvw(14);
        color: #ffffff;
      }

      .icon-pos {
        display: block;
        width: tvw(20);
        height: tvw(20);
        background: url(~@/assets/images/yyzhkb/kb-scene-pos-bg.svg) center center no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }

    .carousel-item-main {
      height: 100%;
      width: 100%;

      .img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>